<template>
  <div class="feed_wrapper c-p c-text-hidden" v-if="feedTop != null">
    <div class="banner-bg-filter">
      <img :src="$addXossFilter(feedTop.avatar)" class="img" />
    </div>
    <div class="c-p c-pz1">
      <notice-bar v-if="feedTop.hasPermission" :showText="noticeMsg" :showNotice="showNotice" @handleClickCloseNotice="handleClickCloseNotice" bgColor="rgba(0, 0, 0, 0.3)" iconColor="#fff"
        textColor="c-fc-white" rightColor="c-fc-white"></notice-bar>
    </div>
    <!-- 头部 -->
    <div class="c-w100">
      <div class="c-ph24 c-pt48 c-pb30 c-p">
        <div class="c-flex-row c-p">
          <div class="c-ww144 c-hh144 c-br10">
            <img :src="$addXossFilter(feedTop.avatar)" alt="" class="c-br10 c-w100 c-h c-object-fit-cover">
          </div>
          <div class="c-pl20 c-flex-column c-justify-center c-flex-grow1 c-w0">
            <p @click="jumpToFeed" class="c-fs28 c-text-ellipsis2 c-fc-white c-wb-ba">{{feedTop.name}}</p>
            <div class="c-fs20 c-fc-white c-flex-row c-justify-sb c-aligni-center c-mt24">
              <div class="c-flex-row c-aligni-center">
                <div>{{feedTop.feedCount | formatTenThousand}}<span class="c-opacity50">条动态</span></div>
                <span class="c-ph16 c-opacity50">|</span>
                <div @click="getCircleFriends">{{feedTop.memberCount | formatTenThousand}}<span class="c-opacity50">人加入</span></div>
                <div class="iconfont c-fs20 c-fc-white c-opacity50" v-if="feedTop.hasPermission">&#xe635;</div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-sb c-pt30">
          <div class="c-flex-row c-aligni-center">
            <!-- 排行榜入口 -->
            <template v-if="!$isStore()">
              <div @click="jumpToIntegralRank" class="c-flex-row c-aligni-center c-ph12 c-fs22 c-fc-white">
                <div class="rank-icon"></div>排行榜
              </div>
              <div class="rank-line"></div>
            </template>
            <!-- 问答入口 -->
            <div class="c-flex-row c-justify-sb c-aligni-center"
              v-if="(answerList.length > 0 && feedTop.hasPermission && companyAuth.enableQuestionModule == 1) || (feedTop.enableCircleNotice == 1 && feedTop.hasPermission)">
              <!-- 答主头像 -->
              <div class="c-flex-row c-justify-sb c-aligni-center c-inlineblack c-clearfix  c-mrauto c-ph12"
                v-if="answerList.length > 0 && feedTop.hasPermission && companyAuth.enableQuestionModule == 1">
                <div class="c-flex-row c-flexw-wrap c-aligni-center fl c-mr12">
                  <div class="c-ww12 c-hh28 c-textAlign-c c-lh28" v-for="(item, index) in answerList" :key="index">
                    <span class="c-inline-center c-ww28 c-hh28 c-brp50 c-bd1-white">
                      <img class="c-brp50 c-ww28 c-hh28" :src="$addXossFilter(item.avatar, require('@/assets/defult_head.png'))" alt="">
                    </span>
                  </div>
                </div>
                <span class="c-fs22 c-fc-white fl c-ml12" @click="handleClickAnswerLord()">去提问</span>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-fc-white">
            <!-- 消息提醒 -->
            <div class="c-fs22 c-fc-xblack c-flex-row c-flex-center c-p" v-if="feedTop.enableCircleNotice == 1" @click.stop="handleClickUpdateSubscribeStatus()">
              <!-- <span>{{subscribeStatus == 1 ?'取消通知':'开启通知'}}</span> -->
              <i class="iconfont c-ml12 c-fc-white c-fs28">{{subscribeStatus == 1?`&#xe74d;`:`&#xe718;`}}</i>
              <div class="c-flex-row c-aligni-center c-justify-sb c-ph24 circle_tooltip_r" v-if="circleNoticeToast == -1">
                <span class="c-fc-white c-fs22">开启通知，圈子互动一键掌握</span>
                <i class="iconfont c-fc-white c-fs26" @click.stop="handleClickUpdateCircleNoticeToast()">&#xe84e;</i>
              </div>
            </div>
            <div @click="getCircleData" class="iconfont c-ml30 c-fs28">&#xe989;</div>
            <div @click="handleClickSearch" class="iconfont c-ml30 c-fs24">&#xe6d6;</div>
          </div>
        </div>
        <!-- 置顶 -->
        <div v-if="topTrendsList.length" class="c-pv10 c-ph24 c-bg-black c-br20 c-p c-mt30 bg-type-1 c-br20 toptrends-list">
          <ul class="c-liststyle-none c-fc-white c-fs22 c-lh30">
            <li @click="goToFeedsDetail(item)" v-for="(item,index) in topTrendsList" :key="index" :class="(index > 2 && isTopTrendsFold) ? 'hide-important':''"
              class="c-flex-row c-text-ellipsis1 c-aligni-center">
              <span class="mark c-flex-shrink0"></span>
              <template v-if="item.tagType">[{{item.tagType}}]</template>{{item.feedsContent}}
            </li>
          </ul>
          <div v-if="topTrendsList.length > 3" @click="toggleTopTrendsFold"
            class="c-pa c-p-r0 c-p-b24 iconfont c-fc-white c-fs20 c-br-tl20 c-br-bl20 bg-type-1 border-r-none c-ww40 c-hh32 c-flex-row c-justify-center c-aligni-center">
            <span class="iconfont c-fc-white c-fs20 arrow" :class="isTopTrendsFold ? 'fold':''">&#xe67a;</span>
          </div>
        </div>
        <!-- 计划 -->
        <ul v-if="planTypeInfo.coursePlanIsShow == 1 && planTypeInfo.planCount" class="c-listtype-none c-mt20">
          <li @click="jumpToPlanList" class="bg-type-1 c-flex-row c-justify-sb c-aligni-center c-br20 c-pl24 c-pr24 c-hh80">
            <div clsss="c-flex-row c-fs30"><i class="iconfont c-mr18 c-fs30 c-fc-white">&#xe69e;</i><span class="c-fc-white c-fs30">{{planTypeInfo.coursePlanName}}</span></div>
            <div class="c-fs20 c-fc-white"><span class="c-opacity50">{{planTypeInfo.planCount}}个课程 </span><i class="iconfont c-fs20">&#xe635;</i></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="c-bg-white c-br-tl30 c-br-tr30 c-p c-minh720">
      <!-- 续费提醒 -->
      <div v-if="renewInfo.isPopNotice" class="mod-renewal c-flex-row c-aligni-center c-justify-sb">
        <div class="c-flex-row">
          <i class="iconfont c-fc-xlblown c-mr12 c-fs30 c-mt2">&#xe6cd;</i>
          <div class="c-fc-xlblown">
            <p v-if="renewInfo.lastHour < 24" class="c-fw600 c-fs26">圈子即将到期，剩余不到1天</p>
            <p v-else class="c-fw600 c-fs26">圈子即将到期，剩余{{renewInfo.lastDays}}天</p>
            <p class="c-fs20 c-mt10">及时续费，以免错过精彩内容~</p>
          </div>
        </div>
        <div @click="jumpToRenew" class="renewal-btn c-fs22 c-flex-row c-justify-center c-aligni-center c-fc-white">立即续费</div>
        <div @click="closeRenewNotice" class="renew-notice"><i class="iconfont c-fs20 c-fc-gray">&#xe8fd;</i></div>
      </div>
      <div class="nav-seat c-br-tl30 c-br-tr30 c-text-hidden" id="tabhBar" :class="tabhBarFixed == true ? ($isWxApp() ? 'fixed-active active-top' : 'fixed-active'):''">
        <div class="c-bg-white c-p  nav-wrap">
          <my-small-tabbar flexClass="c-justify-start" :fontSet="{defaultColor:'c-fc-sblack', activeColor:'theme-fc c-fw500'}" :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeType"
            isScroll="true" class="c-justify-start nav-tab-bar"></my-small-tabbar>
          <div @click="showNavBarDetail = true" class="nav-more c-pa"><span class="iconfont c-fs26 c-fc-sblack">&#xe8c1;</span></div>
        </div>
      </div>
      <!-- 动态 -->
      <div v-if="chooseTypeBarItem.navType == 1">
        <div class="c-flex-row c-justify-center">
          <ul class="tab-list c-mt20 c-mb20 c-flex-row c-justify-center c-alignc-sb c-bg-f2 c-hh56 c-fc-xblack c-liststyle-none c-fs22 c-br30">
            <li v-for="(item, index) in subTabList" @click="handleClickChangeSelect(item,item.index)" :key="index" class="c-flex-row c-justify-center c-aligni-center"
              :class="selectIndex==item.index ? 'active theme-fc c-fw500' :''">{{item.title}}</li>
          </ul>
        </div>
        <circle-common-list :isShowTopBar="false" :feedList="feedList" :feedTop="feedTop" :playAduioSrc="playAduioSrc" :progress="progress" :selectIndex="selectIndex" :selectedName="selectedName"
          @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @handleClickForward="handleClickForward" @like="like"
          @handleClickOperation="handleClickOperation" @getCircleComment="getCircleComment" @getFeedsDetail="getFeedsDetail" @handleClickChangeSelect="handleClickChangeSelect"
          @handleClickThemeRoute="handleClickThemeRoute" @handleClickCircleIndex="handleClickCircleIndex" @clickGoLiveDetail="clickGoLiveDetail"
          @handleClickRelease="handleClickRelease"></circle-common-list>
        <!-- list列表 -->
        <loading-status-tem :dataStatus="dataStatus" showNoneTemplate="true"
          noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/nodata_1.png" noDataText="期待你的第一条动态"
          class="c-bg-white"></loading-status-tem>
      </div>
      <!-- 主题 -->
      <div v-else-if="chooseTypeBarItem.navType == 2">
        <div class="c-w100 c-bg-white">
          <div class="c-flex-column c-pv24 c-ph24 c-bd-b1" @click.stop="joinThemeCircle(item)" v-for="(item, index) in circleThemeList" :key="index">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
              <span class="theme-bg-10 theme-fc c-hh28 c-pv4 c-ph8 c-br4 c-fs20 c-mh8 c-mr8" v-if="item.isHaveTask">
                <i class="iconfont c-fs16 c-vcAlign-middle">{{item.taskState == 2 ? `&#xe68a;` : `&#xe644;`}}</i>
                <span class="c-ml4">任务</span>
              </span>
              <!-- <span class="theme-bg-10 theme-fc c-hh28 c-pv4 c-ph8 c-br4 c-fs20 c-mh8 c-mr8">
                <i class="iconfont c-fs16 c-vcAlign-middle">&#xe644;</i>
                <span class="c-ml4">任务</span>
              </span> -->
              <i class="iconfont theme-fc">&#xe6fd;</i>
              {{item.themeName}}
            </div>
            <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
              <div>
                <span>{{item.joinMemberCount | formatTenThousand}}人加入</span> |
                <span>{{item.feedCount | formatTenThousand}}条动态</span>
              </div>
              <div class="c-fs20 theme-fc" v-if="item.joinType == 1">免费</div>
              <div class="c-fs20 theme-fc" v-if="item.joinType == 2 && !$isWxAppIos()">
                <span class="c-lh">{{'￥' | iosPriceFilter}}{{item.price}}</span>
              </div>
            </div>
          </div>
          <loading-status-tem :dataStatus="themeDataStatus" showNoneTemplate="true"
            noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/nodata_1.png" noDataText="期待你的第一条动态" class="c-bg-white"
            :class="!feedTop.hasPermission ? 'c-pb80':''"></loading-status-tem>
        </div>
      </div>
      <!-- 问答 或者 文件 -->
      <div v-else-if="chooseTypeBarItem.navType == 3 || chooseTypeBarItem.navType == 6" class="c-pt20">
        <circle-common-list :isShowTopBar="false" :feedList="feedList" :selectList="selectList" :feedTop="feedTop" :playAduioSrc="playAduioSrc" :progress="progress" :selectIndex="selectIndex"
          :selectedName="selectedName" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @handleClickForward="handleClickForward" @like="like"
          @handleClickOperation="handleClickOperation" @getCircleComment="getCircleComment" @getFeedsDetail="getFeedsDetail" @handleClickChangeSelect="handleClickChangeSelect"
          @handleClickThemeRoute="handleClickThemeRoute" @handleClickCircleIndex="handleClickCircleIndex" @clickGoLiveDetail="clickGoLiveDetail"></circle-common-list>
        <!-- list列表 -->
        <loading-status-tem :dataStatus="dataStatus" showNoneTemplate="true"
          noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/nodata_1.png" noDataText="期待你的第一条动态"
          class="c-bg-white"></loading-status-tem>
        <!-- <div class="c-bg-white c-pb80" v-else>
          <template v-if="feedList.length > 0">
            <div class="c-fc-sgray c-fs20 c-textAlign-c c-flex-row c-flex-center c-hh100">加入圈子可查看更多内容哦~~</div>
          </template>
          <loading-status-tem :noData="feedList.length == 0" noDataText="暂无动态"></loading-status-tem>
        </div> -->
      </div>
      <!-- 微页面 -->
      <div v-else-if="chooseTypeBarItem.navType == 5">
        <cust-index-com :pageName="'MICRO_PAGE'" :isHomePage="true" :userType="microPageData.userType" :dataList="microPageData.lists"
          :upgradeMemberJump="microPageData.upgradeMemberJump"></cust-index-com>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无动态"></loading-status-tem>
      </div>
      <!-- 其他主题 -->
      <div v-else>
        <div v-if="!isChooseThemeHasAuth" class="theme-pay">
          <div class="pic"></div>
          <p class="c-textAlign-c c-fc-xblack c-fs26 c-mt30">该主题为付费主题</p>
          <p class="c-textAlign-c c-fc-xblack c-fs26 c-mt10">需完成支付才能查看内容与发布内容</p>
          <div class="c-flex-row c-justify-center">
            <span class="c-flex-row c-justify-center c-aligni-center c-fc-white c-ww360 c-hh64 c-br32 theme-bg c-mt40 c-fs26"
              @click.stop="clickBuyTheme">{{'￥' | iosPriceFilter}}{{Number(themeInfo.price).toFixed(2)}} 去报名
            </span>
          </div>
        </div>
        <template v-else>
          <div v-if="taskList.length" class="c-ph20 c-pv20 c-br20 c-mh24 c-mt20 theme-tasks">
            <div class="c-fc-xblack c-flex-row c-aligni-center c-justify-sb c-mb6">
              <div @click.stop="toggleThemeTask" class="c-flex-row c-aligni-center">
                <span class="iconfont c-fs22 c-mr8 rotate-arrow" :class="isThemeTaskFold ? 'fold':''">&#xe601;</span>
                <span class="c-fs30 c-fw600 c-mr8">主题任务</span><span class="c-fs24">({{taskCompletCount}}/{{taskTotalCount}})</span>
              </div>
              <div @click.stop="showTaskModal = true" class="iconfont c-fc-sblack">&#xe6db;</div>
            </div>
            <ul v-if="!isThemeTaskFold" class="c-liststyle-none c-pl50 c-mt12">
              <li @click.stop="goThemeTask(item.prodId, index)" v-for="(item,index) in taskList" :key="index" class="c-flex-row c-aligni-center c-justify-sb c-pv10">
                <p class="c-fs24 c-fc-xblack c-text-ellipsis1 c-pr30">{{item.prodName}}</p>
                <div class="c-flex-shrink0 schedule">
                  <div v-if="item.progressRatio == 1" class="c-pa c-p-t0 c-p-r0 iconfont c-fs22 theme-fc">&#xe82c;</div>
                  <template v-else>
                    <div class="schedule-bg"></div>
                    <div class="schedule-percent">
                      <div class="content left">
                        <div class="circle left-circle" :style="'transform:rotate('+`${item.leftDeg}`+'deg)'"></div>
                      </div>
                      <div class="content right">
                        <div class="circle right-circle" :style="'transform:rotate('+`${item.rightDeg}`+'deg)'"></div>
                      </div>
                    </div>
                  </template>
                </div>
              </li>
            </ul>
          </div>
          <circle-common-list :isShowTopBar="false" :isShowThemeTag="false" :feedList="feedList" :feedTop="feedTop" :playAduioSrc="playAduioSrc" :progress="progress" :selectIndex="selectIndex"
            :selectedName="selectedName" @clickPreviewImage="clickPreviewImage" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @handleClickForward="handleClickForward" @like="like"
            @handleClickOperation="handleClickOperation" @getCircleComment="getCircleComment" @getFeedsDetail="getFeedsDetail" @handleClickChangeSelect="handleClickChangeSelect"
            @handleClickThemeRoute="handleClickThemeRoute" @handleClickCircleIndex="handleClickCircleIndex" @clickGoLiveDetail="clickGoLiveDetail"
            @handleClickRelease="handleClickRelease"></circle-common-list>
          <!-- list列表 -->
          <loading-status-tem v-if="(feedTop.hasPermission || feedTop.role == 2)" :dataStatus="dataStatus" showNoneTemplate="true"
            noneImage="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/circle/nodata_1.png" noDataText="期待你的第一条动态"
            class="c-bg-white"></loading-status-tem>
        </template>
      </div>
    </div>
    <!-- 全部评论 -->
    <open-modal class="c-pz100" :openModal='showCircleComment' @closeModal='closeAddAllComment()'>
      <div class="masker-content c-br-tl20 c-br-tr20 c-p c-pb100">
        <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt24 c-fc-xblack c-fw-b c-pb34">全部评论({{currentCommentCount | formatTenThousand}})</div>
        <i class="iconfont c-pa c-p-t30 c-p-r24 c-fc-sgray c-fs20 c-bg-f6 c-ww30 c-hh30 c-lh30 c-textAlign-c c-brp50 c-flex-row c-flex-center" @click="closeAddAllComment()">&#xe8fd;</i>
        <div class="c-maxh760 c-contexty-scroll c-ph24" @scroll="getCommentsModal" id="commentModal">
          <circle-comment @loadMoreComments="loadMoreComments" @getCommentOperation="getCommentOperation" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo"
            @handleClickCircleIndex="handleClickCircleIndex" :comments="comments" :playAduioSrc="playAduioSrc" :progress="progress"></circle-comment>
          <loading-status-tem :pt20="true" :dataStatus="commentDataStatus" noDataText="暂无评论"></loading-status-tem>
        </div>
        <div class="c-pa c-w100 c-p-l0 c-p-b0 c-fc-sgray c-ph40 c-pv24 c-fs24 box-shadow" @click="showAddCommentModal()">
          <i class="iconfont c-mr12">&#xe90e;</i><span>说点什么吧~</span>
        </div>
      </div>
    </open-modal>
    <!-- 添加评论 -->
    <circle-add-comment ref="circleAddComment" class="c-pz101" :showAddComment="showAddComment" :addComment="addComment" :replyInfo="operationComment" @closeAddComment="closeAddComment"
      @sendComment="sendComment" @playAddCommentVideo="playAddCommentVideo"></circle-add-comment>
    <!-- 评论操作弹窗 -->
    <open-modal class="c-pz101" :openModal='showOperaction' @closeModal='showOperaction = false'>
      <div class="c-br-tl20 c-br-tr20 c-pb60 c-ph24 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-aligni-center">
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="addReply">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe99c;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">回复</span>
          </div>
          <div class="c-flex-column c-aligni-center c-justify-center c-ww100 c-pv40 c-mr20" @click="deleteComment">
            <div class="c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-bg-white c-brp50"><i class="iconfont c-fc-xblack c-fs36">&#xe6b3;</i></div>
            <span class="c-fs24 c-fc-gray c-w100 c-mt12 c-textAlign-c">删除</span>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs24 c-fc-xblack c-bg-white c-br40" @click="showOperaction = false">取消</div>
      </div>
    </open-modal>
    <!-- 浮动按钮 -->
    <div v-if="chooseTypeBarItem.navType == 1 || (chooseTypeBarItem.navType==4 && isChooseThemeHasAuth)" @click="handleClickRelease"
      class="c-ww72 c-hh72 c-box-shadow8 c-br50 theme-bg c-pf c-pz1 c-p-b240 c-p-c-216 c-flex-row c-aligni-center c-justify-center">
      <span class="c-fc-white iconfont c-fs40">&#xe75f;</span>
    </div>
    <!-- <drift-icon :enableQuestion="enableQuestion" :isShowMallIcon="isShowMallIcon" v-if="feedTop.hasPermission" @handleClickRelease="handleClickRelease" @handleClickSearch="handleClickSearch"
      @handleClickAskQuestion="handleClickAnswerLord" @handleClickMall="handleClickMall"></drift-icon> -->
    <!-- 置顶，精华，隐藏 -->
    <open-modal :openModal="showMoreActions" @closeModal="closeMoreActions">
      <div class="c-br-tl20 c-pt40 c-br-tr20 c-text-hidden c-w100 c-bg-sgray">
        <div class="c-w100 c-flex-row c-flexw-wrap c-ph14">
          <template v-for="(item, index) in moreActions">
            <div class="c-flex-column c-aligni-center c-justify-center c-hh138 c-bg-white c-br20 c-mh10 c-mb40 c-ww130" v-if="item.isshow == true"
              @click="getHandleFeeds(item.updateField, item.status, item.circleFeedsId, item.isClick, item.themeId)" :key="index">
              <i class="iconfont c-fs36" :class="[item.icon, item.color]"></i>
              <div class="c-fs24 c-w100 c-mt12 c-textAlign-c" :class="item.fontColor">{{item.title}}</div>
            </div>
          </template>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh80 c-fs26 c-fc-xblack c-bg-white" @click="closeMoreActions">取消</div>
      </div>
    </open-modal>
    <!-- 音频 -->
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 视频 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc"></video-popup>
    <!-- 底部栏 -->
    <bottom-buy-com :ckFromTitle="'圈子'" :isNeedPay="!feedTop.hasPermission && (feedTop.payType == 2 || feedTop.payType == 4)" :showInvitionCard="true" @spreadInvite="inviteFriends"
      v-if="!feedTop.hasPermission">
      <!-- payType1:免费2：付费 -->
      <template v-if="feedTop.hasPermission == false">
        <!-- 无权限 -->
        <div v-if="feedTop.payType == 1 || canFreeJoin" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  theme-bg-gradient" @click.stop="joinCircle()">
          <span class="c-fs28 c-lh">免费加入</span>
        </div>
        <div v-if="feedTop.payType == 2 && !canFreeJoin" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32  theme-bg-gradient" @click.stop="clickBuy">
          <span class="c-fs28 c-lh" v-if="!$isWxAppIos()">{{'￥' | iosPriceFilter}}{{Number(feedTop.price).toFixed(2)}}加入</span>
          <span class="c-fs28 c-lh" v-else>咨询客服</span>
        </div>
        <div @click.stop="backPackage()" v-if="feedTop.payType == 4" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32 theme-bg-gradient">
          <span class="c-fs28 c-lh">加入圈子</span>
        </div>
        <div @click.stop="clickEnterPwd()" class="c-flex-column c-justify-center c-aligni-center c-fc-white c-hh64 c-w100 c-br32 theme-bg-gradient" v-if="feedTop.payType == 3">
          <span class="c-fs28 c-lh">输入密码进入</span>
        </div>
      </template>
    </bottom-buy-com>
    <!-- 海报 -->
    <circle-poster ref="circlePoster" :qrcodeImg="qrcodeImg"></circle-poster>
    <!-- 关联售卖 -->
    <!-- <related-combo :distributionId="distributionId" @closeCombo="closeCombo()" @getMore="getMore()" :showCombo="showCombo" :packageMore="is_page_package" :columnMore="is_page_column"
      :packageList="belongPackageList" :columnList="belongColumnList"></related-combo> -->
    <cj-popup v-model="showStudyModal" position="bottom" round v-if="packageList.length > 0">
      <section class="c-ph24 c-pb10 c-bg-white">
        <div class="c-hh90 c-bd-b1 c-flex-row c-aligni-center">
          <span class="c-fs28 c-fc-xblack c-flex-grow1 c-w0">购买以下任意产品，即可免费加入圈子</span>
          <i @click="showStudyModal = false" class="iconfont c-fs14 c-ph10 c-pv10 c-fc-sgray c-bg-f6 c-brp50">&#xe61b;</i>
        </div>
        <package-index-com v-if="packageList.length > 0 && companyAuth.enableCircleModule == 1" :showAll="true" :proType="14" :proId="id" :isHomePage="false" :packageList="packageList"
          @goFirst="goFirst(packageList[0])"></package-index-com>
      </section>
    </cj-popup>
    <!-- 优惠卷列表 -->
    <!-- <coupon-list-com @closeModal="closeModal" @getCouponList="getCouponList" :couponIsPage="couponIsPage" :couponLoading="couponLoading" :couponList="couponList" :showCoupon="showCoupon"
      :deductiblePoints="Number(feedTop.deductiblePoints)" :serviceName="feedTop.commonProdInfo && feedTop.commonProdInfo.isAgent == 1 ? feedTop.commonProdInfo.agentName : ''"
      :serviceDiscount="feedTop.commonProdInfo && feedTop.commonProdInfo.isAgent == 1 && feedTop.commonProdInfo.agentDiscount ? feedTop.commonProdInfo.agentDiscount : 100"
      :vipDiscount="feedTop.vipDiscount" :svipDiscount="feedTop.svipDiscount" :originPrice="feedTop.payType == 2 ? Number(feedTop.price) : 0" :prodId="Number(id)" :prodType="181">
    </coupon-list-com> -->
    <!-- 关注二维码 -->
    <offical-account :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <!-- 输入密码 -->
    <comfirm-com :showPassword="showPassword" :noticeText="noticeText" :text="'输入密码进入圈子'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false"
      @submitPassword="submitPassword"></comfirm-com>
    <!-- 配套课程 -->
    <!-- <circle-supporting @handleClickGodetail="handleClickGodetail" :showSupporting="showSupporting" :supportingList="supportingList"
      @handleClickCloseSupport="handleClickCloseSupport"></circle-supporting> -->
    <!-- 导航更多展示 -->
    <open-modal class="c-pz100" :openModal='showNavBarDetail' @closeModal='showNavBarDetail = false'>
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-p c-pb100 c-minh720">
        <div class="c-w100 c-textAlign-c c-fs28 c-lh40 c-pt40 c-fc-xblack c-fw-b c-pb34">导航</div>
        <i class="iconfont c-pa c-p-t30 c-p-r24 c-fc-gray c-fw600 c-fs20 c-ww30 c-hh30 c-lh30 c-textAlign-c c-brp50 c-flex-row c-flex-center" @click="showNavBarDetail = false">&#xe8fd;</i>
        <ul class="c-liststyle-none c-flex-row c-flexw-wrap c-fs24 c-fc-xblack c-ph30">
          <!-- theme-fc c-fw600 -->
          <li @click="changeType(item.index)" v-for="(item,index) in tabList" :key="index" class="c-bg-f2 c-br30 c-ph30 c-pv10 c-flex-row c-aligni-center c-justify-center c-mb20 c-mh10"
            :class="tabIndex==item.index ? 'theme-fc c-fw600 theme-bg-10':''">{{item.title}}</li>
        </ul>
      </div>
    </open-modal>
    <!-- 主题任务 -->
    <circle-theme-task-modal :themeId="chooseTypeBarItem.typeId" :completeTaskCount="taskCompletCount" :totalTaskCount="taskTotalCount" :showTaskModal="showTaskModal"
      @handleClickCloseTask="showTaskModal = false"></circle-theme-task-modal>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { utilJs, wxUtilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import bottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import circleComment from "@/components/homePage/circle/circleComment.vue";
import circleAddComment from "@/components/homePage/circle/circleAddComment.vue";
import circlePoster from "@/components/homePage/circle/circlePoster.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import circleCommonList from "@/components/homePage/circle/circleCommonList.vue";
// import PriceBar from '@/components/templates/common/priceBar.vue';
// import DiscountTip from "@/components/templates/common/discountTip.vue";
import NoticeBar from "@/components/templates/common/noticeBar.vue";
// import couponListCom from "@/components/templates/couponListCom.vue";
import officalAccount from '@/components/templates/common/officalAccount';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import custIndexCom from '@/components/templates/custIndexCom.vue';
import circleThemeTaskModal from "@/components/homePage/circle/circleThemeTaskModal.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import { goDetails } from "@/utils/goDetails.js";
import circleUtils from '@/utils/circleUtils.js';
const LIMIT = 10;
let pageIndex = 1;
let themePageIndex = 1;
let page = 1;
// let progressTime;
let commentPage = 1;
let themePage = 1;
let childCommentChangeArr = [];
let isAddComment = false; // 判断是否是增加评论
let cIndex = 0; // 判断当前评论的索引
let getType = 1; // 评论获取类型 1是正常分页加载 2是操作刷新数据
let isFilterComment = false; // 判断是否删除数据
export default {
  name: 'CircleMaster',
  components: {
    bottomBuyCom,
    MySmallTabbar,
    loadingStatusTem,
    OpenModal,
    circleComment,
    circleAddComment,
    videoPopup,
    circlePoster,
    PackageIndexCom,
    circleCommonList,
    // PriceBar,
    // DiscountTip,
    // couponListCom,
    NoticeBar,
    officalAccount,
    ComfirmCom,
    custIndexCom,
    circleThemeTaskModal
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      tabList: [], //1动态 2主题 3问答 4(具体主题的导航) 5商城
      selectIndex: 0,
      subTabList: [{
        title: '全部',
        index: 0
      }, {
        title: '精选',
        index: 1
      }, {
        title: '圈主',
        index: 3
      }],
      moreActions: [],
      showMoreActions: false,
      feedTop: null, //头部信息
      dataStatus: 'HAS_MORE_DATA',
      feedList: [],
      ckFrom: global.ckFrom,
      showCircleComment: false, // 展示评论
      showAddComment: false, // 添加评论
      addComment: { // 添加评论
        text: '',
        img: []
      },
      operationComment: null, // 当前操作信息
      comments: [], // 全部评论信息
      commentDataStatus: 'HAS_MORE_DATA', // 一级评论数据状态
      playAduioSrc: "", //音频地址
      progress: 0,
      isPlayingAudio: false,
      showVideo: false,
      currentVideoObj: {},
      circleFeedsId: '', // 当前点击的圈子
      distributionId: '',
      showCombo: false,
      is_page_package: false,
      is_page_column: false,
      belongPackageList: [],
      belongColumnList: [],
      belongLoading: false,
      pagePackage: 1,
      pageColumn: 2,
      qrcodeImg: "",
      currentCommentCount: 0, // 当前评论条数
      packageList: [],
      showStudyModal: false,
      showPackageTip: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      status: 1, //默认正常1，-1拉入黑名单
      isExit: 1, //默认正常1，-1退出圈子
      showOperaction: false, // 展示评论操作
      scrollTop: 0, //滚动定位位置
      isNewCircleMaster: -1, //1,新圈主，-1否
      newCircleMasterToast: -1, // 1 弹窗过，-1没弹过
      introduce: '', //圈主简介信息
      // 主题
      circleThemeList: [], //主题列表
      moreThemeList: [],
      themeDataStatus: 'HAS_MORE_DATA',
      isShowDynamic: true,
      couponList: [],
      // showCoupon: false, // 是否显示优惠卷
      // couponLoading: false, // 优惠卷加载
      // couponIsPage: false,
      // couponPage: 1,
      tabhBarFixed: false,
      // 公告
      showNotice: false,
      noticeMsg: "",
      // 答主
      answerList: [],
      // enableQuestion: -1, //是否开启问答
      selectedName: '全部',
      bindPhoneSetting: null,
      subscribeStatus: -1, //是否订阅
      showAccountQcode: false,
      officalDesc: '获得圈子互动提醒',
      mpQrcode: '',
      circleNoticeToast: 1, //消息提醒 -1没弹过，1弹过
      // 密码
      showPassword: false,
      noticeText: '',
      sendCommentFlag: false,
      isClicking: false,
      showSupporting: false,
      // 默认身份都有权限
      isCanRelease: true,
      // supportingList: [],
      showNavBarDetail: false, //显示导航条的详细项
      isTopTrendsFold: true, //置顶数据是否折叠
      topTrendsList: [],
      isThemeTaskFold: true, //主题是否折叠
      microPageData: {}, //微页面数据
      chooseTypeBarItem: {}, //选项的tab
      isChooseThemeHasAuth: true, //选中的主题是否有权限
      microDataStatus: {},
      taskList: [], //任务列表
      taskCompletCount: 0, //任务完成数量
      taskTotalCount: 0, //主题任务完成数量
      showTaskModal: false, //是否显示主题任务弹窗
      themeInfo: {}, //主题信息
      renewInfo: {}, //圈子续期信息
      planTypeInfo: {}, //
    }
  },
  watch: {
    // $route(to, from) {
    //   if (to.path == "/homePage/circle/circleFeed" && from.path == "/homePage/circle/circleFeed") {
    //     this.initActivatedData();
    //   }
    // }
  },
  activated() {
    this.initActivatedData();
  },
  beforeRouteLeave(to, from, next) {
    this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    // 只进入详情页时记录滚动，其他时候移除
    if (to.path == '/homePage/circle/circleDetail' || to.path == '/homePage/circle/circleTheme') {
      sessionStorage.setItem('scrollTop', this.scrollTop);
    } else {
      // this.updateChangeTypeBar(1);
      sessionStorage.removeItem('scrollTop');
    }
    next();
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    this.$cjConfirm.hide();
    this.$previewImg.hide();
    window.removeEventListener('scroll', this.handleScroll);
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    ...mapState({
      tabIndex: state => state.circle.masterTabIndex,
      authFromPageType: state => state.circle.authFromPageType,
    }),
    canFreeJoin() {
      if (!this.feedTop) return false
      if ((this.feedTop.vipDiscount == 0 && this.vipType == 2) || (this.feedTop.svipDiscount == 0 && this.vipType == 4) || ((this.vipType == 3 || this.vipType >= 5) && this.feedTop.commonProdInfo && this.feedTop.commonProdInfo.agentDiscount == 0)) {
        return true
      }
      return false
    },
    createdAtTime() {
      return function (time) {
        let timeStr = utilJs.changeCommentTime(time);
        return timeStr;
      }
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = Number(this.feedTop.price) > 0 && !this.feedTop.hasPermission;
      return showdiscount;
    },
  },
  methods: {
    ...mapMutations({
      updateMasterTabIndex: 'circle/updateMasterTabIndex',
      updateAuthFromPageType: 'circle/updateAuthFromPageType',
      updateFromRenew: 'circle/updateFromRenew'
    }),
    async initActivatedData() {
      this.id = this.$route.query.id || "";//圈子id
      this.moreActions = [];
      this.showMoreActions = false;
      this.showCircleComment = false;
      this.showAddComment = false;
      this.addComment = {
        text: "",
        img: []
      }
      this.playAduioSrc = "";
      this.progress = 0;
      this.isPlayingAudio = false;
      this.showVideo = false;
      this.distributionId = '';
      this.is_page_package = false;
      this.is_page_column = false;
      this.belongPackageList = [];
      this.belongColumnList = [];
      this.belongLoading = false;
      this.pagePackage = 1;
      this.pageColumn = 2;
      this.showCombo = false;
      this.qrcodeImg = "";
      this.showPackageTip = false;
      this.status = 1;
      this.isExit = 1;
      this.packageList = [];
      this.showStudyModal = false;
      this.showOperaction = false;
      this.scrollTop = sessionStorage.getItem('scrollTop') || 0;
      this.isNewCircleMaster = -1;
      this.introduce = '';
      this.selectIndex = 0;
      this.isShowDynamic = true;
      // this.showCoupon = false;
      // this.couponLoading = false;
      // this.couponIsPage = false;
      // this.couponPage = 1;
      this.couponList = [];
      this.tabhBarFixed = false;
      this.showNotice = false;
      this.noticeMsg = "";
      this.subscribeStatus = -1;
      this.isShowMallIcon = -1;
      this.officalDesc = '获得圈子互动提醒';
      this.mpQrcode = '';
      this.showAccountQcode = false;
      this.circleNoticeToast = 1;
      this.showPassword = false;
      this.noticeText = '';
      this.sendCommentFlag = false;
      this.isClicking = false;
      this.showSupporting = false;
      this._tabElemsRect = [];
      // this.supportingList = [];
      //获取绑定手机号
      getBindPhoneSetting(global.ckFrom.circle).then(res => {
        this.bindPhoneSetting = res;
      });
      //获取头部和相关权限信息
      this.getDetails(1);
      //获取头部导航(头部导航是自定义的),第一次进来的时候获取
      // if (!this.tabList.length) {
      //   await this.getCustomNav();
      // }
      if (utilJs.checkNeedInitData(this.feedList) || this.scrollTop == 0) {
        this.feedTop = null;
        this.answerList = [];
        await this.getCustomNav();
        this.chooseTypeBarItem = this.tabList.find(item => item.index == this.tabIndex) || this.tabList[0];
        this.initDataThemeList();
        this.initData();
        this.getAnswererList();
      }
      this.isRelease().then(res => {
        this.isCanRelease = res.isCanRelease;
      })
      // this.getRelateList();
      this.getTopFeeds();
      //导航的类型是自定义主题，请求相对应的任务
      if (this.chooseTypeBarItem.navType == 4) {
        this.getThemeDetails().then(() => {
          this.getTaskList();
        })
      }
      this._getRenewSetting();
      this._getPlanTypeInfo();
      window.addEventListener('scroll', this.windowScrollFunction);
      window.addEventListener('scroll', this.handleScroll);
    },
    _getPlanTypeInfo() {
      utilJs.getMethod(`${global.apiurl}circle/getPlanSet/${this.id}`, res => {
        this.planTypeInfo = res;
      })
    },
    //获取圈子续期的字段
    _getRenewSetting() {
      utilJs.getMethod(`${global.apiurl}circle/getRenewSetting/${this.id}`, res => {
        this.renewInfo = res || {};
      })
    },
    //跳转到计划列表页面
    jumpToPlanList() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circlePlanCourseList",
        query: {
          circleId: this.id
        }
      })
    },
    jumpToFeed() {
      this.updateAuthFromPageType(1);
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.id
        }
      })
    },
    jumpToRenew() {
      this.updateFromRenew(1);
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.id
        }
      })
    },
    //主题详情
    getThemeDetails() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(`${global.apiurl}circle/getThemeDetails?themeId=${this.chooseTypeBarItem.typeId}`, res => {
          this.themeInfo = res;
          // 当为付费模式
          if (res.joinType == 2 && res.isJoin == false) {
            this.isChooseThemeHasAuth = false;
            reject();
          } else {
            this.isChooseThemeHasAuth = true;
            this.taskCompletCount = res.completeTaskCount;
            resolve(res);
          }
        }, () => {
          reject();
        })
      })
    },
    // 跳转到圈友
    getCircleFriends() {
      this.$routerGo(this, "push", {
        path: '/homePage/circle/circleFriends',
        query: { circleId: this.id }
      })
    },
    //获取微页面数据
    getMicroPage() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let getUrl = `${global.apiurl}company/customTemplates?id=${this.chooseTypeBarItem.typeId}`;
      utilJs.getMethod(getUrl, (res) => {
        if (JSON.stringify(res) === '[]') {
          this.$showCjToast({
            text: "当前页面数据丢失啦",
            type: "warn",
          });
          return;
        }
        this.microPageData = {
          lists: res.modules,
          userType: res.userType,
          upgradeMemberJump: res.upgradeMemberJump
        }
        this.microPageData.lists = res.modules;
        this.dataStatus = '';
      }, () => {
        this.dataStatus = "DATA_ERROR";
      });
    },
    goThemeTask(id, index) {
      let prodType = Number(this.taskList[index].prodType);
      let courseType = prodType == 111 ? 1 : prodType == 112 ? 2 : 0;
      prodType = this.type == 54 ? global.ckFrom.column : prodType == 110 || prodType == 111 || prodType == 112 ? global.ckFrom.course : prodType;
      let query = {
        themeId: this.chooseTypeBarItem.typeId
      }
      if (this.type == 54) {
        query.distribution = '1';
      }
      goDetails(this, prodType, id, query, courseType);
    },
    getTaskList() {
      utilJs.getMethod(`${global.apiurl}circle/getTaskList?themeId=${this.chooseTypeBarItem.typeId}&page=1&limit=20`, res => {
        res.list.forEach(item => {
          let resRatio = circleUtils.calcProgressRatio(item.progressRatio);
          item.leftDeg = resRatio.leftDeg;
          item.rightDeg = resRatio.rightDeg;
        });
        this.taskList = res.list || [];
        this.taskTotalCount = this.taskList.length; //主题任务完成数量
      })
    },
    toggleThemeTask() {
      this.isThemeTaskFold = !this.isThemeTaskFold;
    },
    //获取自定义导航
    getCustomNav() {
      return new Promise(resolve => {
        utilJs.getMethod(`${global.apiurl}circle/getNav/${this.id}`, res => {
          res.forEach((item, index) => {
            item.title = item.navName;
            item.index = index + 1;
          })
          this.tabList = res;
          setTimeout(() => { this._navTabAnchorFixed() }, 1000)
          resolve();
        }, () => {
          resolve();
        })
      })
    },
    //锚定位
    _navTabAnchorFixed() {
      let tabElems = document.querySelectorAll("#tabhBar .tab-item");
      if (!tabElems) return;
      let currtabElemIndex = this.tabList.findIndex(item => item.index == this.tabIndex);
      if (currtabElemIndex != -1) {
        let currtabElem = tabElems[currtabElemIndex];
        document.querySelector("#tabhBar .c-contextX-scroll").scrollLeft = currtabElem.getBoundingClientRect().left;
      }
    },
    //跳转积分排行
    jumpToIntegralRank() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/integralRankIndex",
        query: {
          id: this.id
        }
      })
    },
    //获取置顶数据
    getTopFeeds() {
      utilJs.getMethod(`${global.apiurl}circle/getIsTopFeeds/${this.id}`, res => {
        res.forEach(item => {
          if (!item.feedsContent && item.contentTypes.length) {
            let type = item.contentTypes[0];
            let tag = '';
            switch (type) {
              case 2:
                tag = '图片';
                break;
              case 3:
                tag = '音频';
                break;
              case 4:
                tag = '视频';
                break;
              default:
                tag = '视频';
            }
            item.tagType = tag;
          }
        })
        this.topTrendsList = res;
      })
    },
    //置顶数据列表折叠
    toggleTopTrendsFold() {
      this.isTopTrendsFold = !this.isTopTrendsFold;
    },
    handleClickMall() {
      let url = this.feedTop && this.feedTop.mallPageUrl;
      if (url) {
        if (!url.includes("http") && !url.includes("https")) {
          url = "http://" + url;
        }
        utilJs.locationHref(url);
      }
    },
    // getRelateList() {
    //   utilJs.getMethod(`${global.apiurl}circle/getRelateList/${this.id}`, res => {
    //     this.supportingList = res;
    //   })
    // },
    handleClickCloseSupport() {
      this.showSupporting = false;
    },
    clickEnterPwd() {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      this.noticeText = "";
      this.showPassword = true;
    },
    // 提交密码
    submitPassword(inputPwd) {
      let _this = this;
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (this.isClicking) {
        return;
      }
      this.isClicking = true;
      utilJs.postMethod(`${global.apiurl}circle/passwordJoin`, {
        circleId: this.id,
        password: inputPwd
      }, res => {
        this.isClicking = false;
        if (res.state == 0) {
          this.noticeText = "*密码错误";
        } else {
          this.showPassword = false;
          _this.$showCjToast({
            text: '加入成功',
            type: "success",
          }).then(() => {
            _this.getDetails(1);
          })
        }
      }, failRes => {
        this.isClicking = false;
      })
    },
    changePsw() {
      this.noticeText = "";
    },
    clickGoLiveDetail(liveId, liveType) {
      let toPath = ''
      if (liveType == 1) {
        toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`
      } else if (liveType == 2) {
        toPath = `/homePage/live/liveDetail?liveId=${liveId}`;
      } else {
        toPath = `/homePage/privateClass/classDetail?classId=${liveId}`;
      }
      this.$routerGo(this, 'push', {
        path: toPath
      })
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(`${global.apiurl}circle/getMpData?circleId=${this.id}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    handleClickUpdateCircleNoticeToast() {
      this.updateCircleNoticeToast();
    },
    handleClickUpdateSubscribeStatus() {
      let status = this.subscribeStatus == 1 ? -1 : 1;
      this.checkUserIsFollowedMp().then(res => {
        if (res.subscribe == -2) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return
        }
        this.updateSubscribeStatus(status)
      })
    },
    updateCircleNoticeToast() {
      utilJs.postMethod(global.apiurl + `circle/updateCircleNoticeToast`, {
        circleId: this.id,
      }, res => {
        this.circleNoticeToast = 1;
      })
    },
    updateSubscribeStatus(status) {
      // 订阅消息
      utilJs.postMethod(global.apiurl + `circle/updateSubscribeStatus`, {
        circleId: this.id,
        circleMemberId: this.feedTop.circleMemberId,
        status: status
      }, res => {
        this.subscribeStatus = status;
        if (status == 1) {
          this.$showCjToast({
            text: '已开启圈子互动消息提醒',
            type: 'success',
          });
          return
        } else {
          this.$showCjToast({
            text: '已关闭圈子互动消息提醒',
            type: 'success',
          });
          return
        }
      })
    },
    // 请求访问日志接口
    addVisitLog() {
      utilJs.postMethod(global.apiurl + `circle/addVisitLog`, {
        circleId: this.id,
        circleMemberId: this.feedTop.circleMemberId
      }, res => { })
    },
    handleClickAnswerList() {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
    },
    // 去提问
    handleClickAnswerLord() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.commentBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.isCanReleaseFun()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/qa/answerLord",
        query: {
          circleId: this.id,
          type: 0,
          circleMemberId: this.feedTop.circleMemberId
        }
      })
    },
    getAnswererList() {
      utilJs.getMethod(global.apiurl + `circle/getAnswererList/${this.id}`, res => {
        this.answerList = res;
      })
    },
    handleClickNotice() {
      this.showNoticeMessage(this.noticeMsg, false);
    },
    showNoticeMessage(message, isClose) {
      let _this = this;
      this.$cjConfirm({
        title: '圈子公告', //
        titleCenter: true, //标题是否居中
        message: message,
        messageCenter: false, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: false, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          if (isClose) {
            _this.closeNotice('layer');
          }
        },
        onCancel() {
        },
      })
    },
    closeNotice(type) {
      utilJs.postMethod(global.apiurl + `circle/closeNotice`, { circleId: this.id, type: type }, res => {
        // this.getDetails(1);
      })
    },
    handleClickCloseNotice() {
      this.showNotice = false;
      this.closeNotice('banner');
    },
    handleScroll: function () {
      this._tabhBarElem = document.querySelector('#tabhBar');
      let offsetTop = this._tabhBarElem.getBoundingClientRect().top;
      if (offsetTop < 0) {
        this.tabhBarFixed = true;
      } else {
        this.tabhBarFixed = false;
      }
    },
    // 关闭优惠卷
    closeModal() {
      this.showCoupon = false;
    },
    // // 获取可以领取得优惠卷
    // getCouponList: function () {
    //   if (!this.couponLoading) {
    //     this.couponLoading = true;
    //     let $this = this;
    //     utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.id + '&redeemType=181&limit=10&page=' + this.couponPage, function (res) {
    //       $this.couponLoading = false;
    //       $this.couponList = $this.couponList.concat(res.data);
    //       $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
    //       $this.couponIsPage = res.next_page_url ? true : false;
    //     },
    //       failRes => {
    //         $this.couponLoading = false;
    //       }
    //     );
    //   }
    // },
    handleClickCircleIndex(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: this.id,
          circleMemberId: item.circleMemberId
        }
      })
    },
    handleClickThemeRoute(item) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleTheme",
        query: {
          themeId: item.themeId
        }
      })
    },
    // 获取主题列表
    getThemeList() {
      if (this.themeDataStatus == 'LOADING') {
        return;
      }
      this.themeDataStatus = 'LOADING';
      // this.moreThemeList = [];
      utilJs.getMethod(`${global.apiurl}circle/getThemeList/${this.id}?index=${themePageIndex}&page=${themePage}&limit=${LIMIT}`, res => {
        if (themePageIndex == 1) {
          this.circleThemeList = res.data;
          this.moreThemeList = res.data.slice(0, 6);
        } else {
          this.circleThemeList = [...this.circleThemeList, ...res.data];
        }
        if (res.total * 1 == this.circleThemeList.length) {
          this.themeDataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.themeDataStatus = 'HAS_MORE_DATA';
          themePageIndex += LIMIT;
          themePage++;
        }
      }, failRes => {
        this.themeDataStatus = "DATA_ERROR";
      })
    },
    handleClickChangeSelect(item, index) {
      this.selectIndex = index;
      this.selectedName = item.title;
      this.initData();
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    handleClickGodetail(item) {
      let prodId = item.prodType == this.ckFrom.course ? item.courseId : item.prodType == this.ckFrom.column ? item.columnId : item.prodType == this.ckFrom.package ? item.cId : item.prodType == this.ckFrom.camp ? item.id : '';
      let type = item.prodType == this.ckFrom.course ? item.courseType : '';
      goDetails(this, item.prodType, prodId, '', type)
    },
    clickShowStudyModal() {
      this.showPackageTip = false;
      if (this.supportingList.length > 1) {
        this.showSupporting = true;
      } else {
        let item = this.supportingList[0];
        this.handleClickGodetail(item)
      }
    },
    // getRelatePackage() {
    //   let $this = this;
    //   // proType = 14 : 圈子关联配套课程传递的参数
    //   utilJs.getMethod(global.apiurl + "combos/showRel?proId=" + this.id + '&proType=14', function (res) {
    //     $this.packageList = res;
    //   });
    // },
    closeMoreActions() {
      this.showMoreActions = false;
    },
    initDataThemeList() {
      themePageIndex = 1;
      themePage = 1;
      this.themeDataStatus = 'HAS_MORE_DATA';
      this.circleThemeList = [];
      // this.moreThemeList = [];
      document.documentElement.scrollTop = 0;
      this.getThemeList();
      sessionStorage.removeItem('scrollTop');
    },
    initData() {
      pageIndex = 1;
      page = 1;
      commentPage = 1;
      this.commentDataStatus = "HAS_MORE_DATA";
      this.dataStatus = 'HAS_MORE_DATA';
      this.feedList = [];
      document.documentElement.scrollTop = 0;
      this.getFeedsList(this.selectIndex);
      sessionStorage.removeItem('scrollTop');
    },
    // 转发生成图片
    getFeedsQRCode(item) {
      let circleFeedsId = item.circleFeedsId;
      utilJs.getMethod(`${global.apiurl}circle/getFeedsQRCode/${circleFeedsId}`, res => {
        this.qrcodeImg = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.qrCodeUrl)))
        this.$refs.circlePoster.handleClickPoster(item);
      })
    },
    // getMore(tType) {
    //   this.getBelong(tType)
    // },
    // getBelong(tabType) {
    //   if (!this.belongLoading) {
    //     this.belongLoading = true;
    //     let $this = this;
    //     if (tabType == 1) {
    //       let getUrl = `${global.apiurl}combos/showAll?`;
    //       if (this.distributionId) {
    //         getUrl = `${global.apiurl}distributionMarkets/showAll?`;
    //       }
    //       // proType = 14 : 圈子关联配套课程传递的参数
    //       utilJs.getMethod(getUrl + 'proType=14&proId=' + this.id + '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType, function (res) {
    //         $this.belongLoading = false;
    //         $this.belongPackageList = $this.belongPackageList.concat(res.list.combos.data);
    //         if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
    //           $this.belongColumnList = res.list.columns.data;
    //         }
    //         $this.pagePackage = res.list.combos.current_page < res.list.combos.last_page ? ($this.pagePackage + 1) : $this.pagePackage;
    //         $this.is_page_package = res.list.combos.current_page < res.list.combos.last_page ? true : false;
    //       }, failRes => {
    //         $this.belongLoading = false;
    //       });
    //     } else if (tabType == 2) {
    //       let getUrl = `${global.apiurl}combos/showAll?`;
    //       if (this.distributionId) {
    //         getUrl = `${global.apiurl}distributionMarkets/showAll?`;
    //       }
    //       // proType = 14 : 圈子关联配套课程传递的参数
    //       utilJs.getMethod(getUrl + 'proType=14&proId=' + this.id + '&page=' + this.pageColumn + '&limit=10' + '&tabType=' + tabType, function (res) {
    //         $this.belongLoading = false;
    //         $this.belongColumnList = $this.belongColumnList.concat(res.list.columns.data);
    //         $this.pageColumn = res.list.columns.current_page < res.list.columns.last_page ? ($this.pageColumn + 1) : $this.pageColumn;
    //         $this.is_page_column = res.list.columns.current_page < res.list.columns.last_page ? true : false;
    //       }, failRes => {
    //         $this.belongLoading = false;
    //       });
    //     }
    //   }
    // },
    // 关闭关联套餐弹窗
    // closeCombo() {
    //   this.showCombo = false;
    // },
    // backPackage() {
    //   if (this.isBindPhone(2)) return;
    //   if (this.isSignOut()) return;
    //   // this.showCombo = true;
    //   // this.showSupporting = true;
    //   if (this.feedTop.hasBoughtBy) {
    //     this.joinCircle();
    //   } else {
    //     if (this.supportingList.length == 1) {
    //       this.showPackageTip = true;
    //     } else if (this.supportingList.length >= 2) {
    //       this.clickShowStudyModal();
    //     } else {
    //       this.$showCjToast({
    //         text: '加入该圈子需购买相关课程,暂无课程请联系管理员',
    //         type: "warn",
    //       })
    //     }
    //   }
    // },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.circle;
      let extId = this.id;
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: { cId: 0, extId: extId, ckFrom: ckFrom }
      });
    },
    // 转发圈子
    handleClickForward(item) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.getFeedsQRCode(item)
    },
    // 参加免费主题
    joinThemeCircle(item) {
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      if (this.isHasPermission()) return;
      let toPath = `/homePage/circle/circleTheme?themeId=${item.themeId}`;
      this.iosAppRouteChange(toPath);
    },
    // 购买圈子
    clickBuy() {
      if (this.isBindPhone(1)) return;
      if (this.isSignOut()) return;
      let queryT = null;
      queryT = {
        cId: 0,
        extId: this.id,
        ckFrom: global.ckFrom.circle,
        extraId: 0,
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: queryT
      });
    },
    // 购买主题
    clickBuyTheme() {
      if (this.isBindPhone(1)) return;
      if (this.isSignOut()) return;
      let queryT = {
        cId: 0,
        extId: this.chooseTypeBarItem.typeId,
        ckFrom: global.ckFrom.circleTheme,
        extraId: 0,
      }
      this.$routerGo(this, "push", {
        path: "/homePage/course/coursePay",
        query: queryT
      });
    },
    // 免费加入圈子
    joinCircle() {
      let _this = this;
      if (this.isBindPhone(2)) return;
      if (this.isSignOut()) return;
      utilJs.postMethod(`${global.apiurl}circle/joinCircle/${this.id}`, {}, res => {
        _this.$showCjToast({
          text: '加入成功',
          type: "success",
        }).then(() => {
           _this.getDetails(1);
        })
      }, failRes => { })
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 点击播放视频
    clickShowVideo(videoSrc) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc }
    },
    //监听音频播放结束执行的内容
    playAudioEnd() {
      //播放结束自动播放下一个非自己发的语音并且非已读语音
      this.playAduioSrc = "";
      this.progress = 0;
      document.getElementById("audio").src = this.playAduioSrc;
      this.isPlayingAudio = false;
    },
    // 播放音频
    clickPlayAudio(audioUrl, audioTime) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;
      this.progress = 0;
      //返回mp3则用audio播放，否则将使用微信将文件下载然后播放
      if (this.playAduioSrc.includes("http") || !this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
        audio.removeEventListener("ended", this.playAudioEnd, false);
        audio.addEventListener("ended", this.playAudioEnd, false);
        // let progressIndex = 0;
        // progressTime = setInterval(() => {
        //   progressIndex++;
        //   if (audioTime - progressIndex >= 0) {
        //     this.progress = (100 / audioTime) * progressIndex;
        //   } else {
        //     clearInterval(progressTime)
        //   }
        // }, 1000)
      }
      this.isPlayingAudio = true;
    },
    handleClickClose() {
      this.imgList = [];
      this.activeIndex = 0;
      this.isShowPreview = false;
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    // 判断是否绑定手机号码 bindType 1: 购买需要绑定 2：进入需要绑定
    isBindPhone(bindType) {
      if ((this.bindPhoneSetting && this.bindPhoneSetting.buyBind && bindType == 1) || (this.bindPhoneSetting && this.bindPhoneSetting.getBind && bindType == 2)) {
        if (utilJs.goBindMobile()) return true;
      } else {
        return false;
      }
    },
    // 判断身份是否可以发布动态
    isRelease() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(`${global.apiurl}circle/getIsCanRelease/${this.id}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    // 判断是否有身份权限
    isCanReleaseFun() {
      if (this.isCanRelease == false) {
        this.$showCjToast({
          text: "您暂无权限发布内容，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    // 判断是否有权限
    isHasPermission() {
      // role：1=成员；2=圈主  status：1=正常；-1=拉入黑名单  isExit:1=正常；-1=退出了圈子
      if (this.feedTop.hasPermission == false && this.status == 1) {
        this.$showCjToast({
          text: "加入圈子可参与互动",
          type: "warn",
        });
        return true;
      } else if (this.feedTop.hasPermission == false && this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
          time: 1500
        });
        return true;
      } else if (this.feedTop.isExit == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    isSignOut() {
      // 黑名单
      if (this.status == -1) {
        this.$showCjToast({
          text: "暂无此操作权限，请联系圈子管理员~",
          type: "warn",
        });
        return true;
      } else {
        return false;
      }
    },
    // 点赞
    like(index) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.collectBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.feedList[index].isZans) {
        this.feedList[index].isZans = false;
        this.feedList[index].likeCount--;
        this.addZans(this.feedList[index].circleFeedsId);
        circleUtils.togglePoints({ actId: this.feedList[index].circleFeedsId, actType: 1, handleType: 2, sourceType: 6 }, this.id, this)
      } else {
        this.feedList[index].isZans = true;
        this.feedList[index].likeCount++
        this.addZans(this.feedList[index].circleFeedsId);
        circleUtils.togglePoints({ actId: this.feedList[index].circleFeedsId, actType: 1, handleType: 1, sourceType: 6 }, this.id, this)
      }
    },
    // 触发点赞接口
    addZans(circleFeedsId) {
      utilJs.postMethod(global.apiurl + `circle/addZans/${this.id}`, {
        circleFeedsId: circleFeedsId,
      }, res => { })
    },
    // 跳转到圈子资料页面
    getCircleData() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleData",
        query: {
          circleId: this.id
        }
      })
    },
    // 无权限且为付费模式
    goBuyPay(item) {
      let _this = this;
      this.$cjConfirm({
        title: '提示', //
        titleCenter: true, //标题是否居中
        message: '该主题设置了付费后参与,请先完成支付',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '去支付', //确认按钮文本
        onConfirm() {
          let queryT = {
            cId: 0,
            extId: item.themeId,
            ckFrom: global.ckFrom.circleTheme,
            extraId: 0,
          }
          _this.$routerGo(_this, "push", {
            path: "/homePage/course/coursePay",
            query: queryT
          });
          return true;
        },
        onCancel() {
        },
      })
    },
    // 跳转动态详情ye
    getFeedsDetail(item, event) {
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (item.joinType == 2 && !item.isJoin) {
        // 无权限且为付费模式
        this.goBuyPay(item)
      } else {
        if (event.target.className.includes('link')) {
          let href = event.target.outerText;
          utilJs.locationHref(href);
          this.feedList = [];
          this.initActivatedData()
          return;
        } else {
          this.$routerGo(this, "push", {
            path: "/homePage/circle/circleDetail",
            query: {
              circleFeedsId: item.circleFeedsId,
            }
          })
        }
      }
    },
    //跳转详情
    goToFeedsDetail(data) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleDetail",
        query: {
          circleFeedsId: data.circleFeedsId,
        }
      })
    },
    //跳转编辑
    // goToEdit(data) {
    //   let query = {
    //     id: this.id,
    //     feedsId: data.circleFeedsId,
    //   }
    //   if (data.themeId) {
    //     query.themeId = data.themeId
    //   }
    //   this.$routerGo(this, "push", {
    //     path: "/homePage/circle/circleRelease",
    //     query: query
    //   })
    // },
    handleClickOperation(item) {
      console.log("item", item);
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      // 当我是圈主身份的时候可操作内容
      if (this.feedTop.role == 2) {
        this.moreActions = [
          {
            icon: item.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: item.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: true,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isEssence == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: item.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: true,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isTop == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: item.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: true,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            status: item.status == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: item.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: item.circleFeedsId
          }
        ];
      } else if (this.feedTop.role == 1 && this.feedTop.isAnswer == 1 && this.companyAuth.enableQuestionModule == 1) {
        this.moreActions = [
          {
            icon: item.isEssence == 1 ? "icon-yichujingxuan" : "icon-yirujingxuan",
            title: item.isEssence == 1 ? "移出精选" : "移入精选",
            updateField: "isEssence",
            isshow: this.feedTop.isAllowTopEssence == 1 ? true : false,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isEssence == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-zhiding1",
            title: item.isTop == 1 ? "取消置顶" : "置顶",
            updateField: "isTop",
            isshow: this.feedTop.isAllowTopEssence == 1 ? true : false,
            isClick: item.status == 1 ? true : false,
            color: item.status == 1 ? 'c-fc-black' : 'c-fc-sgray',
            fontColor: item.status == 1 ? 'c-fc-xblack' : 'c-fc-sgray',
            status: item.isTop == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-yincang1",
            title: item.status == 1 ? "隐藏" : "取消隐藏",
            updateField: "status",
            isshow: this.feedTop.isAllowHideFeeds == 1 ? true : false,
            isClick: true,
            color: 'c-fc-xblack',
            fontColor: 'c-fc-gray',
            status: item.status == 1 ? "-1" : "1",
            circleFeedsId: item.circleFeedsId
          }, {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: item.isSelf,
            isClick: true,
            color: 'c-fc-black',
            fontColor: 'c-fc-xblack',
            circleFeedsId: item.circleFeedsId
          }
        ];
      } else if (this.feedTop.hasPermission && item.isSelf == true) {
        this.moreActions = [
          {
            icon: "icon-lajitongxian",
            title: "删除",
            updateField: "delete",
            isshow: true,
            circleFeedsId: item.circleFeedsId
          }
        ]
      }
      if (item.isSelf == true && !item.questionDetailId) {
        //动态是自己(非问答)
        this.moreActions.push({
          icon: "icon-bianji",
          title: "编辑",
          updateField: "edit",
          isshow: true,
          color: 'c-fc-black',
          fontColor: 'c-fc-xblack',
          circleFeedsId: item.circleFeedsId,
          themeId: item.themeId
        });
      }
      this.showMoreActions = true;
    },
    getHandleFeeds(updateField, status, circleFeedsId, isClick, themeId) {
      let _this = this;
      if (isClick == false) {
        return;
      }
      if (updateField == "delete") {
        this.showMoreActions = false;
        this.$cjConfirm({
          title: '确定删除？', //
          titleCenter: true, //标题是否居中
          message: '删除后，发布的内容将无法恢复',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '', //确认按钮文本
          onConfirm: () => {
            _this.delCircleFeed(circleFeedsId);
            //删除关联积分
            circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 5 }, this.id, this)
          },
          onCancel() {
          },
        })
      } else if (updateField == 'edit') {
        let query = {
          id: this.id,
          feedsId: circleFeedsId,
        }
        if (themeId) {
          query.themeId = themeId
        }
        this.$routerGo(this, "push", {
          path: "/homePage/circle/circleRelease",
          query: query
        })
      } else {
        this.handleFeeds(updateField, status, circleFeedsId)
      }
    },
    // 删除圈子
    delCircleFeed(circleFeedsId) {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/delCircleFeed/${circleFeedsId}`, res => {
        this.showMoreActions = false;
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        }).then(() => {
           _this.initData();
        })
      })
    },
    // 操作圈子置顶，精华，隐藏
    handleFeeds(updateField, status, circleFeedsId) {
      let _this = this;
      utilJs.postMethod(global.apiurl + `circle/handleFeeds/${circleFeedsId}`, {
        updateField: updateField,
        status: status
      }, res => {
        this.showMoreActions = false;
        if (updateField == 'isEssence') {
          //精选操作关联积分
          circleUtils.togglePoints({ actId: circleFeedsId, actType: 1, handleType: status == 1 ? 1 : 2, sourceType: 2 }, this.id, this)
        }
        if (updateField == 'isTop') {
          this.getTopFeeds();
        }
        this.$showCjToast({
          text: "操作成功",
          type: "success",
        }).then(() => {
           _this.initData();
        })
      })
    },
    // 获取动态列表
    getFeedsList(searchType) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let url = `${global.apiurl}circle/getFeedsList/${this.id}?index=${pageIndex}&searchType=${searchType}&page=${page}&limit=${LIMIT}`;
      if (this.chooseTypeBarItem.navType == 4) {
        url += `&themeId=${this.chooseTypeBarItem.typeId}`;
      } else if (this.chooseTypeBarItem.navType == 3) {
        url += '&selectQuestion=1';
      } else if (this.chooseTypeBarItem.navType == 6) {
        url += '&selectFile=1';
      }
      utilJs.getMethod(url, res => {
        let resData = res;
        if (resData && resData.length > 0) {
          for (let i = 0; i < resData.length; i++) {
            resData[i].createdAt = utilJs.changeCommentTime(resData[i].createdAt);
          }
        }
        res.data.forEach(item => {
          if (Array.isArray(item.resourceList.fileArr)) {
            item.resourceList.fileArr.forEach(fileItem => {
              let suffixStr = circleUtils.getFileSuffix(fileItem.fileName)
              fileItem.fullUrl = global.QINIU_DISPLAY_URL + fileItem.qiniuObject;
              fileItem.suffixClassName = "files-" + (suffixStr ? suffixStr : 'default');
            })
          }
        })
        if (pageIndex == 1) {
          this.feedList = res.data;
        } else {
          this.feedList = [...this.feedList, ...res.data];
        }
        if (res.total * 1 == this.feedList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex += LIMIT;
          page++;
        }
      }, failRes => {
        this.dataStatus = "DATA_ERROR";
      })
    },
    // 转移圈子弹窗
    updateNewCircleMasterToast() {
      utilJs.postMethod(`${global.apiurl}circle/updateNewCircleMasterToast`, {
        circleId: this.id
      }, res => {

      })
    },
    // 获取接口数据
    getDetails(type) {
      let _this = this;
      utilJs.getMethod(`${global.apiurl}circle/details/${this.id}?type=${type}`, res => {
        if (res.deletedStatus == -1) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "circle",
              info: '该圈子已被删除,请联系管理员'
            }
          });
          return
        }
        if (res.isShow == -1) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "circle",
              info: '该圈子已被隐藏,请联系管理员'
            }
          });
          return
        }
        if (!res.hasPermission) {
          this.rediretToCircleFeed();
          return;
        }
        this.feedTop = res;
        this.status = res.status || 1;//圈子黑名单1，正常，-1拉入黑名单
        this.isExit = res.isExit || 1;//圈子1正常，-1退出圈子
        this.isNewCircleMaster = res.isNewCircleMaster;
        this.newCircleMasterToast = res.newCircleMasterToast;
        this.introduce = res.introduce;
        this.isShowDynamic = res.hasPermission;
        this.noticeMsg = res.notice;
        this.showNotice = res.notice != "" && res.isCloseBannerNotice != 1 && res.hasPermission ? true : false;
        // this.enableQuestion = res.enableQuestion;
        this.subscribeStatus = res.subscribeStatus;
        this.circleNoticeToast = res.circleNoticeToast;
        this.isShowMallIcon = res.isShowMallIcon;
        if (res.isAutoNotice == 1 && res.isCloseNotice != 1 && res.notice != "" && res.hasPermission) {
          this.showNoticeMessage(res.notice, true);
        }
        // 判断为是否成为新圈主弹窗
        if (this.isNewCircleMaster == 1 && this.newCircleMasterToast == -1) {
          if (this.introduce != null && this.introduce != '') {
            // 存储是否成为新圈主
            this.$cjConfirm({
              title: '提示', //
              titleCenter: true, //标题是否居中
              message: '您已成为该圈子的新圈主，赶快去看看成员都在关注什么吧',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: false, //是否显示取消按钮
              cancelButtonText: '', //取消按钮文本
              confirmButtonText: '', //确认按钮文本
              onConfirm() {
              },
              onCancel() {
              },
            })
          } else {
            // 存储是否成为新圈主
            this.$cjConfirm({
              title: '', //
              titleCenter: true, //标题是否居中
              message: '您已成为该圈子的新圈主，赶快去设置圈主简介吧',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: true, //是否显示取消按钮
              cancelButtonText: '暂不填写', //取消按钮文本
              confirmButtonText: '去设置', //确认按钮文本
              onConfirm() {
                _this.$routerGo(_this, "push", {
                  path: "/homePage/circle/circleData",
                  query: {
                    circleId: _this.feedTop.circleId
                  }
                })
              },
              onCancel() {
              },
            })
          }
          // 弹窗后请求接口  下次不再弹
          this.updateNewCircleMasterToast();
        }
        // if (this.feedTop.hasPermission == false && this.status == 1) {
        //   this.getCouponList();
        // }
        if (this.feedTop.role != 0) {
          this.addVisitLog()
        }
        setDocumentTitle(res.name || "圈子名称");
        // if (this.feedTop.payType == 4) {
        //   // 非单卖获取相关联知识套餐
        //   // this.getBelong(1)
        //   this.getRelatePackage();
        // }
        this.wechatShare();
      })
    },
    //跳转圈子主详情页
    rediretToCircleFeed() {
      this.$routerGo(this, "replace", {
        path: "/homePage/circle/circleFeed",
        query: {
          id: this.id
        }
      })
    },
    //关闭弹框警高层
    closeRenewNotice() {
      this.renewInfo.isPopNotice = false;
      this.closeNotice('renewToast');
    },
    // 跳转搜索
    handleClickSearch() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleSearch",
        query: {
          circleId: this.id,
          enableQuestion: this.companyAuth.enableQuestionModule
        }
      })
    },
    // 发布动态
    handleClickRelease(data) {
      if (this.bindPhoneSetting && this.bindPhoneSetting.commentBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      if (this.isCanReleaseFun()) return;
      let query = {
        id: this.id
      }
      if (data && data.themeId) {
        query.themeId = data.themeId
      }
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleRelease",
        query: query
      })
    },
    // 播放添加评论的视频
    playAddCommentVideo(currentVideoObj) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = currentVideoObj
    },
    // 修改评论的count值
    changeCommentCount(circleFeedsId, count) {
      this.feedList.forEach((item, index) => {
        if (item.circleFeedsId == circleFeedsId) {
          this.$set(this.feedList[index], 'commentCount', count);
        }
      })
    },
    // 删除评论
    deleteComment() {
      let comment = this.operationComment;
      utilJs.getMethod(`${global.apiurl}circle/delCircleComments/${comment.commentId}`, res => {
        this.showOperaction = false;
        this.$showCjToast({
          text: "删除成功",
          type: "success",
        });
        getType = 2;
        if (comment.rootCId == comment.commentId) {
          isFilterComment = true;
          let comments = this.comments.filter(item => item.commentId != comment.commentId);
          this.comments = comments;
        }
        this.getCircleCommentList(this.circleFeedsId);
        let commentCount = (comment.childCommentCount ? comment.childCommentCount : 0) + 1;
        this.currentCommentCount = this.currentCommentCount - commentCount;
        this.changeCommentCount(this.circleFeedsId, this.currentCommentCount);
        circleUtils.togglePoints({ actId: comment.commentId, actType: 2, handleType: 2, sourceType: 5 }, this.id, this)
      })
    },
    // 获取操作评论索引
    getCommentOperation(item) {
      this.operationComment = item;
      // 没有删除权限,点击直接回复
      if (item.delPermission) {
        this.showOperaction = true;
      } else {
        this.addReply();
      }
      let cId = item.rootCId;
      this.comments.forEach((cItem, index) => {
        if (cItem.commentId == cId) {
          cIndex = index;
        }
      })
    },
    // 发送评论
    sendComment(comment) {
      if (this.sendCommentFlag) return;
      this.sendCommentFlag = true;
      let data = {
        circleFeedsId: this.circleFeedsId,
        circleId: this.id,
        parentId: this.operationComment ? this.operationComment.commentId : 0,
        rootCId: this.operationComment ? this.operationComment.rootCId : 0,
        replyUserId: this.operationComment ? this.operationComment.userId : 0,
        content: comment.text,
        img: comment.img,
        audio: comment.audio,
        audio_time: comment.audio_time,
        video: comment.video,
        grade: this.operationComment ? 2 : 1,
        type: this.operationComment ? 2 : 1,
        fileId: comment.fileId
      }
      utilJs.postMethod(`${global.apiurl}circle/addCircleFeedComments`, data, res => {
        this.$showCjToast({
          text: res.msg,
          type: "success",
        });
        this.sendCommentFlag = false;
        this.showAddComment = false;
        this.currentCommentCount++;
        this.changeCommentCount(this.circleFeedsId, this.currentCommentCount);
        this.getCircleCommentList(this.circleFeedsId);
        if (!this.operationComment) {
          circleUtils.togglePoints({ actId: res.commentId, actType: 2, handleType: 1, sourceType: 5 }, this.id, this)
        }
      }, failRes => {
        this.sendCommentFlag = false;
      })
    },
    // 关闭添加评论
    closeAddComment() {
      this.showAddComment = false;
    },
    closeAddAllComment() {
      this.showCircleComment = false;
      getType = 1;
    },
    // 回复评论
    addReply() {
      this.showOperaction = false;
      this.showAddComment = true;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      getType = 2;
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    //1动态 2主题 3问答 4(具体主题的导航) 5商城  6文件
    changeType(type) {
      this.updateMasterTabIndex(type);
      this.chooseTypeBarItem = this.tabList.find(item => item.index == type);
      this.selectIndex = 0;
      this.showNavBarDetail = false;
      let navType = this.chooseTypeBarItem.navType;
      if (navType == 2) { //主题列表
        this.initDataThemeList();
      } else if (navType == 4) { //具体的主题
        this.taskList = [];
        this.getThemeDetails().then(() => {
          this.initData();
          this.getTaskList();
        })
      } else if (navType == 5) { //微页面
        this.dataStatus = 'HAS_MORE_DATA';
        this.microPageData = {};
        this.getMicroPage();
      } else { //动态 问答 文件
        this.initData();
      }
      this._navTabAnchorFixed();
    },
    // 获取一级评论
    getCircleComment(circleFeedsId, commentCount) {
      console.log("getCircleComment", commentCount)
      if (this.bindPhoneSetting && this.bindPhoneSetting.commentBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.isHasPermission()) return;
      if (this.isSignOut()) return;
      this.operationComment = null;
      this.currentCommentCount = Number(commentCount);
      this.circleFeedsId = circleFeedsId;
      this.commentDataStatus = "HAS_MORE_DATA";
      this.comments = [];
      isAddComment = false;
      isFilterComment = false;
      commentPage = 1;
      cIndex = 0;
      this.getCircleCommentList(this.circleFeedsId);
    },
    // 加载更多次级评论列表
    loadMoreComments(index) {
      this.$set(this.comments[index], 'isTotalShow', true);
    },
    // 获取评论列表
    getCircleCommentList(circleFeedsId) { // commentType=1一级评论 commentType=2二级评论; getType评论获取类型 1是正常分页加载 2是操作刷新数据
      let showMoreIndex = '';
      if (getType == 1) {
        if (this.commentDataStatus == 'LOADING') {
          return;
        }
        this.commentDataStatus = 'LOADING';
      } else {
        if (this.comments && this.comments[cIndex] && this.comments[cIndex].isTotalShow == true) {
          showMoreIndex = cIndex;
        }
      }
      let page = getType == 1 ? commentPage : parseInt(cIndex / 10) + 1;
      utilJs.getMethod(`${global.apiurl}circle/getCircleFeedComments?circleFeedsId=${circleFeedsId}&commentType=1&parentId=${circleFeedsId}&page=${page}`, res => {
        this.showCircleComment = true;
        let resList = res.data || [];
        if (resList && resList.length > 0) {
          childCommentChangeArr = [];
          for (let i = 0; i < resList.length; i++) {
            resList[i].isTotalShow = false;
            resList[i].createdAt = utilJs.changeCommentTime(resList[i].createdAt);
            if (resList[i].chileComment && resList[i].chileComment.length > 0) {
              this.commentChange(resList[i].chileComment);
              resList[i].replyList = childCommentChangeArr;
              resList[i].childCommentCount = resList[i].replyList.length;
              childCommentChangeArr = [];
            }
            resList[i].childCommentCount = resList[i].replyList ? resList[i].replyList.length : 0;
          }
        }
        if (getType == 2) {
          if (isAddComment && isFilterComment == false) {
            this.comments.unshift(resList[0]);
            isAddComment = false;
          } else if (isAddComment == false && isFilterComment == false && this.comments && this.comments.length > 0) {
            this.$set(this.comments, cIndex, resList[cIndex % 10]);
            if (!(showMoreIndex === '')) {
              this.$set(this.comments[showMoreIndex], 'isTotalShow', true);
              showMoreIndex = '';
            }
          } else if (isFilterComment) {
            isFilterComment = false;
            if (resList && resList.length > 0) this.comments.push(resList[resList.length - 1]);
          }
          getType = 1;
          cIndex = 0;
        } else {
          if (commentPage == 1) {
            this.comments = resList;
          } else {
            this.comments = [...this.comments, ...resList];
          }
          if ((res.total > this.comments.length) && (res.total != 0)) {
            commentPage++;
          }
        }
        if (this.comments && this.comments.length > 0) this.comments = this.unique(this.comments);
        if (res.total == this.comments.length) {
          this.commentDataStatus = res.total == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.commentDataStatus = 'HAS_MORE_DATA';
        }
      }, failRes => {
        this.commentDataStatus = "DATA_ERROR";
      })
    },
    // 评论去重
    unique(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.commentId) && res.set(arr.commentId, 1))
    },
    // 解构评论列表
    commentChange(commentArr) {
      for (let i = 0; i < commentArr.length; i++) {
        if (commentArr[i].isShow == -1) continue;
        commentArr[i].createdAt = utilJs.changeCommentTime(commentArr[i].createdAt);
        childCommentChangeArr.push(commentArr[i]);
        if (commentArr[i].chileComment && commentArr[i].chileComment.length > 0) {
          this.commentChange(commentArr[i].chileComment)
        }
      }
    },
    // 下拉到底部加载更多
    getCommentsModal(callBack) {
      if (!(this.commentDataStatus == 'HAS_MORE_DATA' && this.comments.length > 0)) {
        return
      }
      let commentModal = document.getElementById('commentModal');
      if (!commentModal) {
        return
      }
      if ((commentModal.scrollHeight - (commentModal.scrollTop + commentModal.clientHeight)) <= 20) {
        this.getCircleCommentList(this.circleFeedsId);
      }
    },
    // 点击评论
    showAddCommentModal() {
      getType = 2;
      isAddComment = true;
      cIndex = 0;
      this.addComment = { // 添加评论
        text: '',
        img: [],
      }
      this.showAddComment = true;
      this.operationComment = null;
      this.$nextTick(() => {
        this.$refs.circleAddComment.$refs.contentArea.focus();
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        let navItem = this.chooseTypeBarItem;
        if ((navItem.navType == 1 || navItem.navType == 3 || navItem.navType == 4) && this.dataStatus == 'HAS_MORE_DATA' && this.feedList.length > 0) {
          if (this.feedList.length >= 10 && !(this.feedTop.hasPermission == 1 || this.feedTop.hasPermission == 2)) {
            return
          } else {
            this.getFeedsList(this.selectIndex);
          }
        } else if (navItem.navType == 2 && this.themeDataStatus == 'HAS_MORE_DATA' && this.circleThemeList.length > 0) {
          this.getThemeList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.feedTop.shareSetting.shareTitle || this.feedTop.name || window.localStorage.getItem("shareTitle");
      let shareImg = this.feedTop.shareSetting.sharePic || this.feedTop.avatar || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&id=${this.id}`;
      let shareDesc = this.feedTop.shareSetting.shareDesc || this.feedTop.intro || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.feedTop.shareSetting.shareTitle || this.feedTop.name || window.localStorage.getItem("shareTitle");
      let shareImg = this.feedTop.shareSetting.sharePic || this.feedTop.avatar || window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}&id=${this.id}`;
      let shareDesc = this.feedTop.shareSetting.shareDesc || this.feedTop.intro || '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
.masker-content {
  background-color: #fff;
  width: 100%;
}
.box-shadow {
  box-shadow: 0px -1px 0px 0px rgba(245, 247, 250, 0.5);
}
.c-mt-160 {
  margin-top: -4rem;
}
.boxThemeItem {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.c-bd-tnone {
  border-top: 1px solid #f2f2f2 !important;
}
.c-mrauto {
  margin-right: auto;
}
.circle_tooltip_r {
  position: absolute;
  top: 1.1rem;
  right: -1.75rem;
  width: 9.75rem;
  height: 1.825rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  &:after {
    position: absolute;
    content: "";
    top: -0.3rem;
    right: 1.8rem;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-bottom: 0.35rem solid rgba(0, 0, 0, 0.7);
  }
}
.circle_tooltip_l {
  position: absolute;
  top: 1.5rem;
  left: -0.6rem;
  width: 9.75rem;
  height: 1.825rem;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  &:after {
    position: absolute;
    content: "";
    top: -0.3rem;
    left: 1.8rem;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-bottom: 0.35rem solid rgba(0, 0, 0, 0.7);
  }
}
// /deep/ .priceBar .c-ph24 {
//   padding: 0;
// }

.feed_wrapper {
  background: #fff;
}
.rank-icon {
  width: .7rem;
  height: .8rem;
  margin: 0 0.2rem 0 0;
  background: url("../../../assets/i/wap/circle/rank_phb.png") no-repeat top center;
  background-size: 100%;
}
.banner-bg-filter {
  position: absolute;
  width: 30rem;
  height: 25rem;
  top: 0;
  left: 0;
  // background-repeat: repeat-y;
  // background-size: 100% auto;
  // background-position: top center;
  // background-color: rgba(0, 0, 0, 0.5);
  // filter: blur(2rem);
  background-color: rgba(0, 0, 0, 0.75);
  .img {
    width: 30rem;
    height: 100%;
    position: absolute;
    left: -7.5rem;
    top: -10rem;
    object-fit: contain;
    filter: blur(2rem);
  }
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.nav-seat {
  padding: 0.2rem 0 0;
  height: 2.1rem;
  &.fixed-active {
    position: relative;
    z-index: 60;
    .nav-wrap {
      position: fixed;
      left: 0;
      top: 1.7rem;
      right: 0;
      width: 16rem;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
  &.active-top {
    .nav-wrap {
      top: 0;
    }
  }
}
.nav-more {
  position: absolute;
  right: 0;
  top: 0.3rem;
  padding: 0 0.5rem;
}

/deep/ .nav-tab-bar {
  padding-right: 1.5rem;
  .tab-item {
    margin: 0;
    padding: 0 0.625rem;
    > div {
      max-width: 6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.bg-type-1 {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.border-r-none {
  border-right: none;
}

.toptrends-list {
  padding-right: 1.5rem;
  ul {
    max-height: 13rem;
    overflow-y: scroll;
  }
  li {
    padding: 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .mark {
      width: 0.8rem;
      height: 0.8rem;
      background: url("../../../assets/i/wap/circle/ding.png") no-repeat top
        center;
      margin: 0 0.4rem 0 0;
      background-size: 100%;
    }
  }
  .arrow {
    transition: all 0.5s ease;
    &.fold {
      transform-origin: center;
      transform: rotate(180deg);
    }
  }
}

.tab-list {
  padding: 0.15rem;
  li {
    width: 2.5rem;
    height: 1.1rem;
    &.active {
      background: #fff;
      border-radius: 0.75rem;
    }
  }
}

.theme-tasks {
  background: #ff71001a;
  .rotate-arrow {
    transition: all 0.5s ease;
    transform-origin: center;
    &.fold {
      transform: rotate(-180deg);
    }
  }
}

.theme-pay {
  margin: 2.5rem 0 0;
  .pic {
    margin: 0 auto;
    width: 5.25rem;
    height: 3.75rem;
    background: url("../../../assets/i/wap/circle/theme_pay.png") no-repeat top
      center;
    background-size: 100%;
  }
}

.mod-renewal {
  background: #faddc0;
  min-height: 3rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
  background: url("../../../assets/i/wap/circle/renewal_tip_bg.png") no-repeat
    top center;
  background-size: 100% auto;
  .renewal-btn {
    width: 3.6rem;
    height: 1.4rem;
    border-radius: 0.8rem;
    background: #976800;
  }
}
.renew-notice {
  position: absolute;
  right: 0;
  top: -0.1rem;
  line-height: 1;
  padding: 0 0.4rem;
}
.rank-line{
  margin:0 .75rem;
  width: 1px;
  height: .45rem;
  background-color:rgba(255, 255, 255, 0.1);
}
</style>